<template>
  <el-dialog
    title="新增试题"
    v-model.sync="shows"
    width="800px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form label-width="140px" :model="themeForm" :rules="themeFormRules" ref="themeFormRef">
      <el-form-item label="题目：" prop="titleName">
        <el-input type="textarea" v-model.trim="themeForm.titleName" maxlength="200" show-word-limit />
      </el-form-item>
      <el-form-item label="答案选项1：" prop="answerItem1">
        <el-input
          type="textarea"
          v-model.trim="themeForm.answerItem1"
          style="margin: 5px 0"
          maxlength="200"
          show-word-limit
          :rows="3"
        />
      </el-form-item>
      <el-form-item label="答案选项2：" prop="answerItem2">
        <el-input
          type="textarea"
          v-model.trim="themeForm.answerItem2"
          style="margin: 5px 0"
          maxlength="200"
          show-word-limit
          :rows="3"
        />
      </el-form-item>
      <el-form-item label="答案选项3：" prop="answerItem3">
        <el-input
          type="textarea"
          v-model.trim="themeForm.answerItem3"
          style="margin: 5px 0"
          maxlength="200"
          show-word-limit
          :rows="3"
        />
      </el-form-item>
      <el-form-item label="答案选项4：" prop="answerItem4">
        <el-input
          type="textarea"
          v-model.trim="themeForm.answerItem4"
          style="margin: 5px 0"
          maxlength="200"
          show-word-limit
          :rows="3"
        />
      </el-form-item>
      <el-form-item label="正确选项值：" prop="trueAnswer">
        <el-select placeholder="选择正确选项值" v-model="themeForm.trueAnswer">
          <el-option label="A" value="1" />
          <el-option label="B" value="2" />
          <el-option label="C" value="3" />
          <el-option label="D" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="题目分值：">
        <el-select placeholder="题目分值" v-model="themeForm.titleScore">
          <el-option v-for="item in 10" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="题目分类：">
        <el-select placeholder="题目分类" v-model="themeForm.classType">
          <el-option label="项目管理集成师" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否多选题目：">
        <el-radio-group v-model="themeForm.isChooseMore">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否上架：">
        <el-radio-group v-model="themeForm.isPublic">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="下架原因：" v-if="!themeForm.isPublic">
        <el-input
          type="textarea"
          placeholder="请输入下架原因"
          v-model="themeForm.downPubReason"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="备注：">
        <el-input
          type="textarea"
          placeholder="备注"
          v-model="themeForm.remark"
          maxlength="300"
          :rows="4"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="save">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
  import { defineComponent, reactive, watch, ref, unref, nextTick, getCurrentInstance } from 'vue'
  import { getuuid } from '@/utils/uuid'
  import { addTitle, editTitle } from '@/api/user'
  export default defineComponent({
    props: {
      show: {
        type: Boolean,
        default: false
      },
      chooseContentData: {
        type: Object,
        default: () => {}
      },
      operatorType: {
        type: Boolean,
        default: false
      }
    },
    setup(props, ctx) {
      let shows: any = ref(false)
      const themeFormRef = ref()
      let themeForm: any = reactive({
        titleName: null, //试题名称
        titleScore: '1', //分值
        isPublic: true, //是否上架
        trueAnswer: null, //正确值
        isChooseMore: false, //是否多选题
        classType: '1', //试题分类
        answerItem1: null,
        answerItem2: null,
        answerItem3: null,
        answerItem4: null,
        downPubReason: null,
        remark: null,
        createDate: null,
        id: getuuid()
      })
      const themeFormRules = reactive({
        titleName: [{ required: true, message: '请输入题目', trigger: 'blur' }],
        trueAnswer: [{ required: true, message: '请输入正确选项值', trigger: 'blur' }],
        answerItem1: [{ required: true, message: '请输入答案选项1', trigger: 'blur' }],
        answerItem2: [{ required: true, message: '请输入答案选项2', trigger: 'blur' }],
        answerItem3: [{ required: true, message: '请输入答案选项3', trigger: 'blur' }],
        answerItem4: [{ required: true, message: '请输入答案选项4', trigger: 'blur' }]
      })
      const { proxy } = getCurrentInstance()
      watch(
        () => props.show,
        async (val) => {
          shows = val
          // eslint-disable-next-line vue/valid-next-tick
          await nextTick(() => {
            const form = unref(themeFormRef)
            form && form.resetFields && form.resetFields()
            if (props.operatorType) {
              //修改进来
              Object.keys(themeForm).forEach((item) => {
                themeForm[item] = props.chooseContentData[item]
                if (item.includes('answerItem')) {
                  let list = JSON.parse(props.chooseContentData.answerList)
                  list.forEach((item, ind) => {
                    themeForm['answerItem' + (ind + 1)] = item.optionDescibe
                  })
                } else if (item == 'remark') {
                  themeForm[item] = props.chooseContentData.ansDes
                } else if (item == 'isPublic') {
                  if (props.chooseContentData.isPublic === 'true') themeForm[item] = true
                  else themeForm[item] = false
                }
              })
            } else {
              themeForm.remark = ''
              themeForm.id = 0
              themeForm.isPublic = true
              themeForm.isChooseMore = false
            }
          })
        }
      )
      //保存方法
      const save = async () => {
        const tempForm = unref(themeFormRef)
        if (!tempForm) return
        try {
          await tempForm.validate() //验证表单  验证不通过则进入catch  通过继续往下走
          let params = {
            titleName: themeForm.titleName,
            classType: themeForm.classType,
            trueAnswer: themeForm.trueAnswer,
            isChooseMore: themeForm.isChooseMore,
            titleScore: themeForm.titleScore,
            isPublic: themeForm.isPublic,
            ansDes: themeForm.remark,
            id: props.chooseContentData.questionId || 0,
            answerList: JSON.stringify([
              { optionDescibe: themeForm.answerItem1 },
              { optionDescibe: themeForm.answerItem2 },
              { optionDescibe: themeForm.answerItem3 },
              { optionDescibe: themeForm.answerItem4 }
            ])
          }
          let { code } = props.operatorType ? await editTitle(params) : await addTitle(params)
          if (code == 200) {
            ;(proxy as any).$message.success(`${props.operatorType ? '修改成功' : '新增成功'}`)
            ctx.emit('initTableFunc')
            handleClose()
          }
        } catch (err) {
          console.log(err)
        }
      }
      //关闭弹框
      const handleClose = () => {
        ctx.emit('update:show', false)
      }
      return {
        shows,
        themeForm,
        themeFormRules,
        themeFormRef,
        handleClose,
        save
      }
    }
  })
</script>

<style></style>
